<template>
  <el-card class="page-container">

    <div class="app-container">
      <el-form v-show="showSearch" ref="queryRef" :inline="true" :model="queryParams">
        <el-form-item label="物品名称" prop="productsName">
          <el-input
              v-model="queryParams.productsName"
              clearable
              placeholder="请输入物品名称"
              style="width: 200px"
          />
        </el-form-item>

        <!--         <el-form-item label="状态" prop="status">-->
        <!--            <el-select v-model="queryParams.status" placeholder="岗位状态" clearable style="width: 200px">-->
        <!--               <el-option-->
        <!--                  v-for="dict in sys_normal_disable"-->
        <!--                  :key="dict.value"-->
        <!--                  :label="dict.label"-->
        <!--                  :value="dict.value"-->
        <!--               />-->
        <!--            </el-select>-->
        <!--         </el-form-item>-->
        <el-form-item>
          <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <!--         <el-col :span="1.5">-->
        <!--            <el-button-->
        <!--               type="warning"-->
        <!--               plain-->
        <!--               icon="Download"-->
        <!--               @click="handleExport"-->
        <!--               v-hasPermi="['system:post:export']"-->
        <!--            >导出</el-button>-->
        <!--         </el-col>-->
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="stockList">
        <!--         <el-table-column type="selection" width="55" align="center" />-->
        <!--        <el-table-column align="center" label="序号" prop="productsId"/>-->
        <el-table-column align="center" label="序号" type="index" width="60">
          <!-- 序号重新计算 -->
          <template #default="scope">
            <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="物品名称" prop="productsName"/>
        <el-table-column align="center" label="库存数量" prop="productsNum"/>
        <el-table-column align="center" label="预警数量" prop="warnNum"/>
        <el-table-column align="center" label="状态" prop="warn">
          <template #default="scope">
            <dict-tag :options="stock_warn" :value="scope.row.warn"/>
          </template>
        </el-table-column>
        <!--         <el-table-column label="状态" align="center" prop="status">-->
        <!--            <template #default="scope">-->
        <!--               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />-->
        <!--            </template>-->
        <!--         </el-table-column>-->
        <!--        <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="180">-->
        <!--          <template #default="scope">-->
        <!--            &lt;!&ndash;               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>&ndash;&gt;-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>

      <pagination
          v-show="total > 0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="getList"
      />

      <!-- 添加或修改岗位对话框 -->

    </div>
  </el-card>
</template>

<script name="Post" setup>
import {stockNoList} from "@/api/stock/stockwarn.js";

const {proxy} = getCurrentInstance();
const stockList = ref([]);
const {stock_warn} = proxy.useDict("stock_warn");
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    productsName: undefined
  }
});

const {queryParams, form, rules} = toRefs(data);

/** 查询列表 */
function getList() {
  loading.value = true;
  stockNoList(queryParams.value).then(response => {
    stockList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}


// /** 导出按钮操作 */
// function handleExport() {
//   proxy.download("stock/export", {
//     ...queryParams.value
//   }, `post_${new Date().getTime()}.xlsx`);
// }

getList();
</script>
